<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
				xmlns:f="http://java.sun.com/jsf/core"
			    xmlns:h="http://java.sun.com/jsf/html" 
			    xmlns:ui="http://java.sun.com/jsf/facelets">
        
    <script type="text/javascript">
  	//<![CDATA[
  	           
  	    //Añade ciudadesB al select multiple de ciudades deseadas
    	function anyadirCiudadDeseada(){    		
    		var texto = $('#form\\:ciudada2 option:selected').text();
    		var valor = $('#form\\:ciudada2 option:selected').val();
    		var repetido = false;
    		
    		if(valor != 0){ //No se puede añadir el primer elemento de la lista que es: --Seleccione una Ciudad--    			    		
    			$('#ciudadesB_Dummy option').each(function(){
    				if($(this).val() == valor){
    					repetido = true;
    				}
    			});
    			
    			if(!repetido){
    				$('#ciudadesB_Dummy').append(new Option(texto, valor, true, false)); 
    				//El segundo false es para que se cree el option sin estar seleccionado por defecto
				 	//Por defecto el elemento agregado se añade seleccionado así que deseleccionamos todo el select.
   					//$('ciudadesB_Dummy option').prop("selected", false);
    			}    			    			    			
    		}    		    		               		
    	}
    	
    	//Elimina ciudadesB del select multiple de ciudades deseadas
		function eliminarCiudadDeseada(){    								
			$('#ciudadesB_Dummy option:selected').each(function(){
				if($(this).val() != 0){ //No se podrá eliminar --Agrege Ciudad/es--
					$(this).remove();
				}
			});			
    	}
		
    	//Antes de guardar los cambios se codifica el string de ciudadesB
		function beforeSubmit(){
			$("#form\\:ciudadesB").val("");			
			$('#ciudadesB_Dummy option').each(function(){
				if($(this).val() != 0){ //No se podrá eliminar --Agrege Ciudad/es--
					var salida = $(this).text() + "," + $(this).val();
					if(!$('#form\\:ciudadesB').val()){						
						$('#form\\:ciudadesB').val(salida);
					}else{
						var varOld = $('#form\\:ciudadesB').val();						
						$('#form\\:ciudadesB').val(varOld + "-" + salida);
					}					 
				}
			});								
			showProgressBar('accion');
		}
		    	
		function errorOff(){			
			$('#form\\:errorOff').click();
		}
		
		function hide_dummy(id,botonEdit){
			$("#"+id).hide();
			if(id == "ciudada2_dummy") $("#ciudadesB_Dummy").removeAttr("disabled");			
			$("#form\\:"+botonEdit).hide();
		}
		
		function editarContrasena(id){
			$("#"+id).hide();
			$("#contrasenaDialog").dialog("open");						
		}
		
		$(document).ready(function () {													
			// ciudadText,ciudadVal-											
			if($('#form\\:ciudadesB').val().length > 2){
				var ciudadesDeseadasCodif = $('#form\\:ciudadesB').val().split("-");				
				for(var i=0; i < ciudadesDeseadasCodif.length; i++){
					var ciudadDeseadaCodif = ciudadesDeseadasCodif[i].split(",");
					$('#ciudadesB_Dummy').append(new Option(ciudadDeseadaCodif[0], ciudadDeseadaCodif[1], true, false));					
				}	
			}
					
			//Gestion de Error
			var error = $('#form\\:error').val();
			var navegacion = $('#form\\:navegacion').val();			
			var bError = false;				
			
			if(error != null && error.length > 3 && navegacion=="datosPersonalesBean.xhtml"){				
				bError = true;
			}			
			$("#form span").each(function() {				
				if($(this) != null && $(this).text().length > 3){					
					bError = true;
				}								
			});
			if(bError){
				$('#divRegistro').effect("shake", "slow",errorOff());
			}
			
			//Mostramos el boton cabecera.
			$("#botonTextoHead").hide();
			$("#botonTextoHead2").show("drop", 400);
			
			//Cambio Pestañas
			$("#li_1").hide();
			$("#li_2").hide();
			$("#li_3").hide();
			$("#li_4").show();
			$("#li_5").show();
			$("#li_6").show();

			//Ocultar Botones Editar
			$("#form input").each(function(){
				if($(this).attr("type") == "image"){					
					$(this).hide();					
				}
			});	
			$("#icontrasena").hide();
			
			//Clickear el boton editar si se ha pulsado antes del F5 o refresco del navegador
			if(!#{datosPersonalesBean.roNombre}) $("#form\\:inombre").click();				// roNombre (read only nombre) booleano de edición del nombre
			if(!#{datosPersonalesBean.roApellidos}) $("#form\\:iapellidos").click();
			if(!#{datosPersonalesBean.roEmail}) $("#form\\:iemail").click();
			if(!#{datosPersonalesBean.roTelefono}) $("#form\\:itelefono").click();
			if(!#{datosPersonalesBean.roSectorLaboral}) $("#form\\:isector").click();
			if(!#{datosPersonalesBean.roDepartamento}) $("#form\\:idepartamento").click();
			if(!#{datosPersonalesBean.roCiudadA}) $("#form\\:iciudada").click();
			if(!#{datosPersonalesBean.roCiudadB}) $("#form\\:iciudada2").click();
			
			//Mostrar Boton Editar
			$('#form input').each(function(){
				if($(this).attr("type") == "text"){					
					$(this).mouseover(function() {												
						$("#form input").each(function(){
							if($(this).attr("type") == "image"){							
								$(this).hide();								
							}
						});
						$("#icontrasena").hide();
				    	var id = $(this).attr("id").split(":")[1];				         
				        $("#form\\:i"+id).show("fade", 300);
				    });	
				}
			});
			$('#form img').each(function(){								
				$(this).mouseover(function() {						
					$("#form input").each(function(){
						if($(this).attr("type") == "image"){							
							$(this).hide();							
						}
					});											
				    var id = $(this).attr("id").split("_")[0];				    
				    if(id != 'icontrasena') $("#icontrasena").hide();
				    $("#form\\:i"+id).show("fade", 300);								
				});
			});
			$('#form\\:contrasena').mouseover(function(){
				$("#form input").each(function(){
					if($(this).attr("type") == "image"){							
						$(this).hide();							
					}
				});
				$("#icontrasena").show("fade", 300);
			});
			
			//Preparamos Dialog Contraseña
			$("#contrasenaDialog").dialog({
		    	autoOpen: false,
		    	modal: true,
		        height: 285, width: 330,
		        maxHeight: 360, maxWidth: 400,
		        minHeight: 285, minWidth: 250,		        
		        show: "fold", hide: "fold",
		        title: "Cambio de Contraseña",
		        position: { my: "center", at: "center", of: "#divRegistro" }		        
			});
			$("#contrasenaDialog").dialog("widget").draggable({ containment: "#divRegistro", scroll: false });						
		});					
		
	//]]>
    </script>
	
	<div id="principal" class="principal">                                   
			            
		<div class="informacion">			
			<h3>Datos Personales. </h3>
			<p>Aquí podrás modificar tus datos introducidos en la pantalla de registro.
			   Es necesario que tus datos personales estén siempre actualizados.<br/><br/>
			   Si algun dato no es correcto o ha dejado de serlo para camabiorlo situa 
			   el ratón encima del campo y pulsa el siguiente botón que aparezca a su lado:<br/><br/>
			   <img class="logo" src="#{request.contextPath}/img/editar.jpg" /><br/><br/><br/><br/><br/>
			</p>
			<h:form>
				<h:commandLink value="Politica de privacidad" action="#{navegationBean.setViewedPage('login.xhtml')}">
					<f:ajax execute="@this" render=":contPrincipal" />						
				</h:commandLink>																	
			</h:form>					
		</div>
			            
		<div id="divRegistro" class="cajaRegistro">											
			
			<h:form id="form">
				<h3>Datos personales:</h3>
				<h:panelGrid columns="4">
					
					<h:outputLabel value="Nombre: " for="nombre" /> 
					<h:inputText id="nombre" label="Nombre" required="true" readonly="#{datosPersonalesBean.roNombre}" 
								 style="#{datosPersonalesBean.nombreStyle}" value="#{clienteBean.nombre}" validator="letrasValidator" />
					<h:commandButton id="inombre" styleClass="logo" alt="Editar Campo" image="/img/iconoEditar.png" onclick="$(this).hide()">
						<f:actionListener binding="#{datosPersonalesBean.setNombreStyle('')}" />
						<f:actionListener binding="#{datosPersonalesBean.setRoNombre(false)}" />						
						<f:ajax execute="@this" render="form:nombre" />						
					</h:commandButton>
					<h:message for="nombre" errorClass="error" />
												
					<h:outputLabel value="Apellidos: " for="apellidos" /> 
					<h:inputText id="apellidos" label="Apellidos" required="true" readonly="#{datosPersonalesBean.roApellidos}" 
								 style="#{datosPersonalesBean.apellidosStyle}" value="#{clienteBean.apellidos}" validator="letrasValidator" />
					<h:commandButton id="iapellidos" styleClass="logo" alt="Editar Campo" image="/img/iconoEditar.png" onclick="$(this).hide()">
						<f:actionListener binding="#{datosPersonalesBean.setApellidosStyle('')}" />
						<f:actionListener binding="#{datosPersonalesBean.setRoApellidos(false)}" />
						<f:ajax execute="@this" render="form:apellidos" />						
					</h:commandButton>
					<h:message for="apellidos" errorClass="error" />

					<h:outputLabel value="Email: " for="email" /> 
					<h:inputText id="email" label="Email" required="true" readonly="#{datosPersonalesBean.roEmail}" 
								 style="#{datosPersonalesBean.emailStyle}" value="#{clienteBean.email}" validator="emailValidatorAlta" />
					<h:commandButton id="iemail" styleClass="logo" alt="Editar Campo" image="/img/iconoEditar.png" onclick="$(this).hide()">
						<f:actionListener binding="#{datosPersonalesBean.setEmailStyle('')}" />
						<f:actionListener binding="#{datosPersonalesBean.setRoEmail(false)}" />
						<f:ajax execute="@this" render="form:email" />						
					</h:commandButton>
					<h:message for="email" errorClass="error" />					

					<h:outputLabel value="Contraseña: " for="contrasena" /> 
					<h:inputSecret id="contrasena" label="Contrasena" required="true" readonly="true" style="#{datosPersonalesBean.contrasenaStyle}"
								   value="#{clienteBean.contrasena}" validator="passwordValidator" />
					<img id="icontrasena" alt="Editar Campo" src="#{request.contextPath}/img/iconoEditar.png" onclick="editarContrasena('icontrasena')" />									
					<h:message for="contrasena" errorClass="error" />

					<h:outputLabel value="Teléfono: " for="telefono" />
					<h:inputText id="telefono" label="Telefono" required="true" readonly="#{datosPersonalesBean.roTelefono}"
								 style="#{datosPersonalesBean.telefonoStyle}" value="#{clienteBean.telefono}" validator="telefonoValidator" />
					<h:commandButton id="itelefono" styleClass="logo" alt="Editar Campo" image="/img/iconoEditar.png" onclick="$(this).hide()">					
						<f:actionListener binding="#{datosPersonalesBean.setTelefonoStyle('')}" />
						<f:actionListener binding="#{datosPersonalesBean.setRoTelefono(false)}" />
						<f:ajax execute="@this" render="form:telefono" />						
					</h:commandButton>
					<h:message for="telefono" errorClass="error" />

				</h:panelGrid>

				<h3>Datos Laborales:</h3>
				<h:panelGrid columns="3" rowClasses="filasTabla">	

					<h:outputLabel value="Sector laboral: " for="sector" /> 
					<h:panelGroup>						
						<img id="sector_dummy" src="#{request.contextPath}/img/recuadroTras.png" style="position:absolute; z-index:1;" />						
						<h:selectOneMenu id="sector" label="Sector" value="#{clienteBean.sector}" disabled="#{datosPersonalesBean.roSectorLaboral}">
						<f:selectItem itemValue="0" itemLabel="-- Seleccione un sector --" />
						<f:selectItem itemValue="1" itemLabel="Profesorado"/>
						<f:selectItem itemValue="2" itemLabel="Administrativo" />
					</h:selectOneMenu>
					</h:panelGroup>
					<h:commandButton id="isector" styleClass="logo" alt="Editar Campo" image="/img/iconoEditar.png" onclick="hide_dummy('sector_dummy','isector')">											
						<f:actionListener binding="#{datosPersonalesBean.setRoSectorLaboral(false)}" />																		 
						<f:ajax execute="@this" render="form:sector" />						
					</h:commandButton>
		
					<h:outputLabel value="Departamento: " for="departamento" />
					<h:panelGroup>						
						<img id="departamento_dummy" src="#{request.contextPath}/img/recuadroTras.png" style="position:absolute; z-index:1;" /> 
						<h:selectOneMenu id="departamento" label="Departamento" value="#{clienteBean.departamento}" disabled="#{datosPersonalesBean.roDepartamento}">
							<f:selectItem itemValue="0" itemLabel="-- Seleccione un departamento --" />
							<f:selectItem itemValue="1" itemLabel="Bilogía"/>
							<f:selectItem itemValue="2" itemLabel="Matemáticas"/>
							<f:selectItem itemValue="3" itemLabel="Historia" />
						</h:selectOneMenu>
					</h:panelGroup>
					<h:commandButton id="idepartamento" styleClass="logo" alt="Editar Campo" image="/img/iconoEditar.png" onclick="hide_dummy('departamento_dummy','idepartamento')">						
						<f:actionListener binding="#{datosPersonalesBean.setRoDepartamento(false)}" />
						<f:ajax execute="@this" render="form:departamento" />						
					</h:commandButton>
	
					<h:outputLabel value="Ciudad de plaza actual: " for="ciudada" />
					<h:panelGroup>						
						<img id="ciudada_dummy" src="#{request.contextPath}/img/recuadroTras.png" style="position:absolute; z-index:1;" /> 
						<h:selectOneMenu id="ciudada" label="Ciudada" value="#{clienteBean.ciudada.id}" disabled="#{datosPersonalesBean.roCiudadA}">						
							<f:selectItems value="#{listaCiudadesBean.ciudades}" var="lista" itemLabel="#{lista.ciudad}" itemValue="#{lista.id}" />
						</h:selectOneMenu>
					</h:panelGroup>
					<h:commandButton id="iciudada" styleClass="logo" alt="Editar Campo" image="/img/iconoEditar.png" onclick="hide_dummy('ciudada_dummy','iciudada')">						
						<f:actionListener binding="#{datosPersonalesBean.setRoCiudadA(false)}" />
						<f:ajax execute="@this" render="form:ciudada" />						
					</h:commandButton>																				
					 											
				</h:panelGrid>
				
				<h3>Ciudades Interesadas:</h3>
				<h:panelGrid columns="3" rowClasses="filasTabla">
										
					<h:outputLabel value="Ciudades:" for="ciudada2" />
					<h:panelGroup>
						<img id="ciudada2_dummy" src="#{request.contextPath}/img/recuadroTras2.png" style="position:absolute; z-index:1;" />					
						<h:selectOneMenu id="ciudada2" label="Ciudada" disabled="#{datosPersonalesBean.roCiudadB}" style="width: 194px;">						
							<f:selectItems value="#{listaCiudadesBean.ciudades}" var="lista" itemLabel="#{lista.ciudad}" itemValue="#{lista.id}" />
						</h:selectOneMenu>						
					</h:panelGroup>			
					<h:commandButton id="iciudada2" styleClass="logo" alt="Editar Campo" image="/img/iconoEditar.png" onclick="hide_dummy('ciudada2_dummy','iciudada2')">						
						<f:actionListener binding="#{datosPersonalesBean.setRoCiudadB(false)}" />
						<f:ajax execute="@this" render="form:ciudada2" />						
					</h:commandButton>		
					
					<select multiple="multiple" id="ciudadesB_Dummy" class="ciudadDeseada" style="width: 174px;" disabled="disabled">  
  						<option value="0">-- Agregue Ciudad/es --</option>					
					</select>																					
					
					<h:panelGroup>						
						<a class="g-button" onclick="anyadirCiudadDeseada()">Añadir</a><br/>
						<a class="g-button" onclick="eliminarCiudadDeseada()">Eliminar</a><br/>
					</h:panelGroup>					
					
				</h:panelGrid>
					
				<p>
					<h:commandButton id="guardar" value="Guardar" styleClass="g-button g-button-submit" onclick="beforeSubmit()" action="#{datosPersonalesController.guardarCambios}">
						<f:ajax execute="@form" render=":contPrincipal" />																		
					</h:commandButton>
					<h:commandButton styleClass="g-button g-button-submit" onclick="actionTab(4)" value="Cancelar">
						<f:actionListener binding="#{datosPersonalesBean.reiniciar(4)}" />
						<f:ajax execute="@this" />
					</h:commandButton>												
				</p>								
					
				<h:inputHidden id="ciudadesB" value="#{datosPersonalesBean.listaCiudadesDeseadas}" />						
				<h:inputHidden id="error" value="#{navegationBean.error}" />
				<h:inputHidden id="navegacion" value="#{navegationBean.viewedPage}" />		
				
				<h:commandButton id="errorOff" action="#{navegationBean.setError('')}" style="display: none;">
					<f:ajax execute="@this" render="errorOff" />
				</h:commandButton>										
			</h:form>
		
			<h:panelGroup id="contrasenaDialog" layout="block">
				<ui:include src="cambioContrasena.xhtml" />				
			</h:panelGroup>																		
				
		</div>

	</div>
	
</ui:composition>